html,body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
/*背景图*/
.bg{
	background-image: url(../img/bg5.jpg);
	background-repeat: round;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	background-repeat: no-repeat;
}
/*主界面*/
.opt-panel{
	width: 100%;
	text-align: center;
	align-items: center;
}
.opt-panel .title{
	font-size: 40px;
	font-family: 宋体;

	font-weight: bold;
	
}
.opt-panel .search-field{
	width: 100px;
	height: 29px;
	font-size: 20px;
	font-family: 幼圆;
}
.opt-panel .btn{
	width: 100px;
	height: 35px;
	font-size: 20px;
	font-family: 幼圆;
}
.search-field{
	width: 100px;
	height: 28px;
}
.data-table{
	border-collapse: collapse;
	width: 1500px;
	margin-top: 50px;
}
.data-table tr{
	height: 30px;
}
.data-title{
	color: deepskyblue;
	font-size: 20px;
	text-align: center;
	
}
.data-table .data-td{
	border: 2px solid deepskyblue;
	text-align: center;
	
}
.data-col{
	background-color: deepskyblue;
	color: white;
}
.data-table .data-td .btn{
	font-size: 15px;
	font-family: 幼圆;
	font-weight: bold;
}
.pager{

	text-align: center;
	margin-top: 30px;
	font-size: 20px;
	font-family: 幼圆;
}
.pager-btn{
	font-size: 20px;
	background-color: paleturquoise;
	font-weight: bold;
	color: black;
	border-radius: 5px;
	font-family: 华文彩云;
}
.pager-btn font{
	font-size: 20px;
	background-color: paleturquoise;
	font-weight: bold;
	color: black;
	border-radius: 5px;
	font-family: 华文彩云;
}
.page {
	font-size: 20px;
	font-weight: bold;
	color: black;
	font-family: 华文彩云;
}
.page font{
	font-size: 20px;
	font-weight: bold;
	color: black;
	font-family: 华文彩云;
}
/*新增界面*/
.add-frame{
	width: 100%;
	height: 100%;
	background-color: rgba(200,200,200,0.5);
	
	position: absolute;
	top: 0;
	left: 0;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	
	display: none;
}
.add-frame .add-panel{
	width: 400px;
	height: 500px;
	border: 2px solid  deepskyblue;
	background-color: white
}
.add-frame .add-panel .add-title{
	width: 100%;
	height: 50px;
	font-family: 楷体;
	font-size: 20px;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	
	background-color: lightseagreen;
	color: white;
}
.add-frame .add-panel .add-content{
	width: 100%;
	height: 450px;
	
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}
.add-frame .add-panel .btn-panel{
	width: 220px;
	height: 50px;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
.add-frame .add-panel .add-content .add-field{
	width: 200px;
	height: 30px;
	margin-top: 10px;
}
.add-frame .add-panel .add-content .opt-panel{
	width: 210px;
	height: 35px;
}
.add-frame .add-panel .add-content .add-btn{
	width: 100px;
	height: 40px;
	font-size: 20px;
	font-family: 楷体;
	background-color: lightseagreen;
	/*border: 1px solid pink;*/
	border-radius: 10px;
	
	margin-top: 20px;
}
/*修改面板*/
.modify-frame{
	width: 100%;
	height: 100%;
	background-color: rgba(200,200,200,0.5);
	
	position: absolute;
	top: 0;
	left: 0;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	
	display: none;
}
.modify-frame .modify-panel{
	width: 400px;
	height: 500px;
	border: 2px solid  deepskyblue;
	background-color: white
}
.modify-frame .modify-panel .modify-title{
	width: 100%;
	height: 50px;
	font-family: 楷体;
	font-size: 20px;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	
	background-color: lightseagreen;
	color: white;
}
.modify-frame .modify-panel .modify-content{
	width: 100%;
	height: 450px;
	
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}
.modify-frame .modify-panel .modify-panel{
	width: 220px;
	height: 50px;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
.modify-frame .modify-panel .modify-content .modify-field{
	width: 200px;
	height: 30px;
	margin-top: 10px;
}
.modify-frame .modify-panel .modify-content .opt-panel{
	width: 210px;
	height: 35px;
}
.modify-frame .modify-panel .modify-content .modify-btn{
	width: 100px;
	height: 40px;
	font-size: 20px;
	font-family: 楷体;
	background-color: lightseagreen;
	/*border: 1px solid pink;*/
	border-radius: 10px;
	
	margin-top: 20px;
}
/*删除面板*/
.delete-frame{
	width: 100%;
	height: 100%;
	background-color: rgba(200,200,200,0.5);
	
	position: absolute;
	top: 0;
	left: 0;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	
	display: none;
}
.delete-frame .delete-panel{
	width: 400px;
	height: 100px;
	border: 2px solid  deepskyblue;
	background-color: white;
	
	
}
.delete-frame .delete-panel .delete-title{
	width: 100%;
	height: 50px;
	font-family: 楷体;
	font-size: 30px;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	
	background-color: lightseagreen;
	color: white;
}
.delete-frame .delete-panel .delete-content{
	width: 100%;
	height: 50px;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	/*background-color: lightseagreen;*/
}
.delete-frame .delete-panel .delete-content .btn-panel{
	width: 400px;
	height: 40px;
	font-size: 20px;
	font-family: 楷体;

	border-radius: 10px;
	
	margin-top: 10px;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	
	/*background-color: lightseagreen;*/
	color: white;
}
.delete-frame .delete-panel .delete-content .btn-panel .delete-btn{
	width: 120px;
	height: 40px;
	font-size: 20px;
	font-family: 楷体;
	background-color: lightseagreen;
	border-radius: 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	
}
